<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <style>
      *{
          margin: 0;
      }
    .el-container{
      height: 100%;
    }
    .el-pagination{
    text-align: right;
    }
    .el-header{
      background-color: #fff;
      box-shadow: 0 5px 10px 5px rgba(199, 199, 199, 0.3);
      /* text-align:right; */
      display: flex;
      align-items: center;
      justify-content: flex-end;
      min-height: 92px;
    }
    .el-aside{
      display: flex;
      flex-direction: column;
      align-items: center;
      box-shadow: 0 0 0 1px #D9D9D9;
      z-index: 100;
      height: 100vh;
    }
    .logo{
      font-size: 38px;
      color: #FF6900;
      margin-top: 30px;
    }
    .logo_image{
      width: 80px;
      height: 80px;
      border-radius: 50%;
      margin-top: 30px;
    }
    .btn_area{
      margin-top: 10px;
    
    }
    .el-menu{
      width: 100%;
    }
    .logo_top{
    width: 60px;
    height: 60px;
    border-radius: 50%;
    margin: 20px;
    }
    .div_left{
      margin-right: 20px;
    }
    </style>
</head>
<body>
  <div id="app">
      <el-container class='home_container'>
        <!-- 侧边栏区域 -->
        <el-aside width="200px">
          <div class="logo">LOGO</div>
          <img src="../assets/image/home/logo.png"  class="logo_image"/>
          <div>李明</div>
          <div class='btn_area'>
             <el-button type="warning" icon="el-icon-setting" circle size='mini'></el-button>
            <el-button type="warning" icon="el-icon-delete" circle size='mini'></el-button>
          </div>
          <el-menu
            default-active="1"
            class="el-menu-vertical-demo"
            active-text-color='#fff'
            router>
            <!-- 一级菜单 -->
            <el-submenu index="1">
              <!-- 一级菜单的模板区域 -->
              <template slot="title"><span>个人办公</span></template>
              <el-menu-item index="dailyWork">日常办公</el-menu-item>
              <el-menu-item index="studyReport">学习报告</el-menu-item>
            </el-submenu>
            <el-submenu index="2">
              <!-- 一级菜单的模板区域 -->
              <template slot="title"><span>项目中心</span></template>
              <el-menu-item index="project">项目</el-menu-item>
              <el-menu-item index="statement">统计报表</el-menu-item>
            </el-submenu>
            <el-submenu index="3">
              <!-- 一级菜单的模板区域 -->
              <template slot="title"><span>行政管理</span></template>
              <el-menu-item index="department">部门管理</el-menu-item>
              <el-menu-item index="staff">职员管理</el-menu-item>
            </el-submenu>
            <el-submenu index="4">
              <!-- 一级菜单的模板区域 -->
              <template slot="title"><span>服务中心</span></template>
              <el-menu-item index="member">会员客户</el-menu-item>
              <el-menu-item index="news">公告新闻</el-menu-item>
              <el-menu-item index="address">通信录</el-menu-item>
            </el-submenu>
            <el-submenu index="5">
              <!-- 一级菜单的模板区域 -->
              <template slot="title"><span>人事酬薪</span></template>
              <el-menu-item index="myAttendance">我的考勤</el-menu-item>
              <el-menu-item index="attendance">考勤管理</el-menu-item>
              <el-menu-item index="performance">业绩管理</el-menu-item>
              <el-menu-item index="mySalary">我的酬薪</el-menu-item>
              <el-menu-item index="agreement">劳动合同</el-menu-item>
              <el-menu-item index="signAgreement">签约合同</el-menu-item>
            </el-submenu>
            <el-submenu index="6">
              <!-- 一级菜单的模板区域 -->
              <template slot="title"><span>财务中心</span></template>
              <el-menu-item index="reimbursement">费用报销</el-menu-item>
              <el-menu-item index="financialStatement">财务报表</el-menu-item>
            </el-submenu>
            <el-submenu index="7">
              <!-- 一级菜单的模板区域 -->
              <template slot="title"><span>客户中心</span></template>
              <el-menu-item index="customList">客户名单</el-menu-item>
              <el-menu-item index="customerDynamics">客户动态</el-menu-item>
            </el-submenu>
          </el-menu>
          </el-aside>
        <el-container>
          <!-- 头部区域 -->
          <el-header>
            <img src="../assets/logo.png" class='logo_top' alt="">
            <div class="div_left">管理员</div>
            <el-button icon="el-icon-circle-close">退出</el-button>
          </el-header>
          <!-- 页面主体区域 -->
          <el-main>        <el-card>
                <el-row :gutter='5'>
                    <el-col :span='3'>
                        <el-input v-model="input" placeholder="编号"></el-input>
                    </el-col>
                    <el-col :span='3'>
                        <el-select v-model="value" placeholder="类型">
                            <el-option
                                v-for="item in options1"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-col>
                     <el-col :span='3.5'>
                        <el-date-picker
                            v-model="input1"
                            type="date"
                            placeholder="开始日期">
                        </el-date-picker>
                    </el-col>
                    <el-col :span='3.5'>
                        <el-date-picker
                            v-model="input2"
                            type="date"
                            placeholder="结束日期">
                        </el-date-picker>
                    </el-col>
                    <el-col :span='3'>
                        <el-select v-model="value1" placeholder="阶段">
                            <el-option
                                v-for="item in options2"
                                :key="item.value2"
                                :label="item.label"
                                :value="item.value2">
                            </el-option>
                        </el-select>
                    </el-col>
                    <el-col :span='2.5'><el-button type='warning'>立即查询</el-button></el-col>
                    <el-col :span='1.5'><el-button type='primary'>重置查询</el-button></el-col>
                    <el-col :span='1.5'><el-button type='primary'>移交任务</el-button></el-col>
                    <el-col :span='4.5'><el-button type='primary' @click="getNewReport">新增任务</el-button></el-col>
                </el-row>
                <el-table
                    :data="tableData"
                    stripe
                    style="width: 100%"
                    border>
                    <el-table-column
                    type='index'
                    label="NO"
                    width="60">
                    </el-table-column>
                    <el-table-column
                    prop="bianhao"
                    label="编号">
                    </el-table-column>
                    <el-table-column
                    prop="leixing"
                    label="类型"
                    width="100">
                    </el-table-column>
                    <el-table-column
                    prop="biaoti"
                    label="标题">
                    </el-table-column>
                    <el-table-column
                    prop="startTime"
                    label="开始时间">
                    </el-table-column>
                    <el-table-column
                    prop="endTime"
                    label="结束时间">
                    </el-table-column>
                </el-table>
                <el-pagination
                    background
                    layout="prev, pager, next"
                    :total="1000">
                </el-pagination>
            </el-card></el-main>
        </el-container>
      </el-container>
</template>
  </div>
</body>
  <!-- import Vue before Element -->
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <!-- import JavaScript -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script>
    new Vue({
      el: '#app',
      data () {
    return {
      options1: [{
        value: '选项1',
        label: '黄金糕1'
      }, {
        value: '选项2',
        label: '双皮奶1'
      }, {
        value: '选项3',
        label: '蚵仔煎1'
      }, {
        value: '选项4',
        label: '龙须面1'
      }, {
        value: '选项5',
        label: '北京烤鸭1'
      }],
      options2: [{
        value2: '选项12',
        label: '黄金糕'
      }, {
        value2: '选项22',
        label: '双皮奶'
      }, {
        value2: '选项32',
        label: '蚵仔煎'
      }, {
        value2: '选项42',
        label: '龙须面'
      }, {
        value2: '选项52',
        label: '北京烤鸭'
      }],
      input: '',
      input1: '',
      input2: '',
      //   下方表格的数据没有后台只能自己写了
      tableData: [
        {
          bianhao: 18112345678912345,
          leixing: '行政办公',
          biaoti: '组织销售部全体学习新的产品知识、以及下达本月考核指标',
          startTime: '2018-09-30 11:17',
          endTime: '2018-09-30 17:40'
        },
        {
          bianhao: 18112345678912345,
          leixing: '行政办公',
          biaoti: '组织销售部全体学习新的产品知识、以及下达本月考核指标',
          startTime: '2018-09-30 11:17',
          endTime: '2018-09-30 17:40'
        },
        {
          bianhao: 18112345678912345,
          leixing: '行政办公',
          biaoti: '组织销售部全体学习新的产品知识、以及下达本月考核指标',
          startTime: '2018-09-30 11:17',
          endTime: '2018-09-30 17:40'
        },
        {
          bianhao: 18112345678912345,
          leixing: '行政办公',
          biaoti: '组织销售部全体学习新的产品知识、以及下达本月考核指标',
          startTime: '2018-09-30 11:17',
          endTime: '2018-09-30 17:40'
        }
      ]
    }
  },
  created () {

  },
  methods: {
    getNewReport () {
      this.$router.push('/newSet')
    }
    }
    })
  </script>
</html>